<template>
  <div class="_fileList  "  >
         <div class="t-center bg-gray-info fileBg">
        
    <div class="mpBox fileBox" v-if="getFileCate(list[urlKey]).indexOf('mp')>-1" >
      <video :src="urlSplit(list[urlKey])" class="fileImg"
      style="width:100%;height:100%" controls="controls">
      </video>
    </div>
    <div v-else class="fileBox">
      <div class="new_list t-center" >
         <svg-icon class="fileImg" :icon-class="getFileCate(list[urlKey])||'pdf'"></svg-icon>
       </div>
        </div>

          <div class="editFileBox" v-if='options.edit||!list[urlKey]'>
           <UploadPicFile
           class="fl"
           :options="{'show-list':false,'show-file-list':false,'text':'ds','edit':true}" style="width:280px"
           type="file"
            @uploadSuccess="editFile"
            />
          </div>
          </div>
        <div class="ov "  v-if="list[urlKey]">
          <span class="fileUrl">
         <template v-if="list[urlKey].indexOf('.')<=-1">
              {{list[titleKey] + '.'}}{{list[urlKey] | fileFormat}}
         </template>
          <template v-else>
             {{list[urlKey].split('/')[list[urlKey].split('/').length-1]}}
          </template>
          </span>
          <a class="fr" :href="list[urlKey]" :download="list[urlKey].split('/')[list[urlKey].split('/').length-1]" >下载</a>
       </div>
       <!--   {{list[titleKey] }} -->
      <s-progress v-if="options.progress"
       @finishProgress="closeProgress"
       :progressStatus="options.progress.progressStatus">
       </s-progress>

  </div>
</template>
<script>
  import sProgress from  '@/components/FilesLayout/progress'
    import UploadPicFile from '@/components/UploadPicFile'
  export default {
    components: {
    sProgress,
    UploadPicFile
    },
    props:['list','options'],
    data() {
      return {
        urlKeys:'url',
        titleKeys:'title',
      "fileList": [
        {
          "createTime": "2020-07-04T10:14:26.947Z",
          "id": 0,
          "title": "string",
          "url": "isnad.psd",
          "userId": 0
        }
      ]
        }
    },
    created() {
    },
   watch:{
     options(val){
       this.urlKey = val.url?val.url:this.urlKey
     }
    },
    computed:{
      urlKey:{
        get(){
          return this.options.url|| this.urlKeys
        },
        set(){
          return this.options.url
        }
      },
      titleKey:{
        get(){
          return this.options.title|| this.titleKeys
        },
        set(){
          return this.options.title
        }
      }
    },
    methods: {
      urlSplit(src){
        let url =  src.split(',')
        return src.indexOf(',')>-1?url[url[0]?0:1]:src
      },
      editFile({res,file,that}){
        
         var list =  this.list
         // list.files = that.info.filesUrl
         // list.title = file.name
         this.$set(list,this.urlKey,that.info.filesUrl)
         this.$set(list,this.titleKey,file.name)
        this.$emit("editFile",this)
      // this.$set(list,this.urlKey,)
      },
      closeProgress (val) {
          this.options.progress = val
          this.progressStatus = val
      },
      save () {
          this.options.progress = true
          setTimeout(() => {
              this.progressStatus = true
          }, 3000)
      },
      listClick(listItem){
        this.$emit('listClick',listItem )
      },

    }
  }
</script>
<style lang="scss" scoped="scoped">
  ._fileList{
    .fileBg{
      height:200px;
      width:100%;
      line-height: 200px;
      position: relative;
      margin-bottom: 15px;
      .fileBox{
       height:100%;
        margin: auto;

      }
    }

    .editFileBox{
       display: none;
       position: absolute;
       right:0;
    }
    &:hover >.editFileBox{
      display: block;
    }
   .fileImg {
      width: 60px;
      height: 60px;

    }
  }
</style>
<style lang="scss">
  //.new_box component


</style>
